import React from 'react'
import {
  Form,
  Input,
  Button,
 Toast
} from 'antd-mobile'
import axios from 'axios'
import { useNavigate } from 'react-router-dom'
function Index() {
  const navigate=useNavigate()
     const onFinish =async (values) => {
       const res = await axios.post('/api/login/tel', values)
       console.log(res)
       const { code, data, message } = res.data
       if (code === 200)
       {
         localStorage.setItem('token',data.token)
         localStorage.setItem('userInfo',data.userInfo)
         Toast.show(message)
          
       }
       else
       {
          Toast.show(message)
         }
  }
  return (
    <div>
      <Form
           onFinish={onFinish}
        layout='horizontal'
        footer={
          <Button block type='submit' color='primary' size='large' onClick={()=>navigate('/')}>
            提交
          </Button>
        }
      >
        <Form.Header>水平布局表单</Form.Header>
        <Form.Item
          name='username'
          label='手机号'
          rules={[{ required: true, message: '手机号不能为空' },
            {
              pattern: /^1[3-9]\d{9}$/,
              message:'请输入6-12位手机号'
           }
          ]}
        >
          <Input  placeholder='请输入手机号' />
        </Form.Item>
        <Form.Item
          name='password'
          label='密码'
          rules={[{ required: true, message: '密码不能为空' }]}
        >
          <Input  placeholder='请输入密码' />
        </Form.Item>
      
      </Form>

    </div>
  )
}

export default Index
